<template>
<view class="content" v-if="!loading">
    <view class="time-info">
			<view class="info-left">
        <view class="section">
					<view class="info-title">阳历</view>
					<view class="info-content">{{calendar.glDate}}</view>
				</view>
        <view class="section">
					<view class="info-title">阴历</view>
					<view class="info-content">{{calendar.gzYear}}年{{calendar.IMonthCn}}{{calendar.IDayCn}}</view>
				</view>
        <view class="section" v-if="query.isRealTime == 'true'">
					<view class="info-title">真太阳时</view>
					<view class="info-content">{{calendar.realGlDate}}</view>
				</view>
        <view class="section more-time-info-box">
            <view class="more-sizhi">
                <view class="sizhi-title info-title">四值</view>
                <view class="mod-text">
                    <view class="sizhi-text">{{calendar.gzYear}}</view> 
                    <view class="sizhi-text">{{calendar.gzMonth}}</view> 
                    <view class="sizhi-text">{{calendar.gzDay}}</view> 
                    <view class="sizhi-text">{{calendar.gzHours}}</view>  
                </view>
            </view>
        </view>
			</view>
      <view class="info-right">
			  <view class="more-time">
			      <view class="more-time-item">
							<view class="info-title">局式</view>
							<view class="info-content">转盘-{{prop.juTypeMap[prop.juType]}}-{{prop.attachGongMap[prop.ext.attachType]}}</view>
						</view>
						<view class="more-time-item">
							<view class="info-title">选局</view>
							<view class="info-content">{{panHead.juNum>0?'阳遁':'阴遁'}}{{panHead.juNum<0?panHead.juNum*-1:panHead.juNum}}局</view>
						</view>
						<view class="more-time-item">
							<view class="info-title">旬首</view>
							<view class="info-content">{{panHead.hHeadName}}</view>
						</view>
						<view class="more-time-item">
							<view class="info-title">值符</view>
							<view class="info-content">{{panHead.zhiFu}}</view>
							<view class="info-title">值使</view>
							<view class="info-content">{{panHead.zhiShi}}</view>
						</view>
			  </view>
      </view>
    </view>
    <view class="content-box">
        <!-- 年月日四值 -->
				<view class="center-box">
					<view class="zhi-box">
							<view @click="onEmptyZhiTap" :class="panHead.emptyType==3?'select-zhi':'zhi'" data-etype="3">
									<view>年</view>
									<view>{{panHead.allEmpty.yEmpty}}空</view>
							</view>
							<view @click="onEmptyZhiTap" :class="panHead.emptyType==2?'select-zhi':'zhi'" data-etype="2">
									<view>月</view>
									<view>{{panHead.allEmpty.mEmpty}}空</view>
							</view>
							<view @click="onEmptyZhiTap" :class="panHead.emptyType==1?'select-zhi':'zhi'" data-etype="1">
									<view>日</view>
									<view>{{panHead.allEmpty.dEmpty}}空</view>
							</view>
							<view @click="onEmptyZhiTap" :class="panHead.emptyType==0?'select-zhi':'zhi'" data-etype="0">
									<view>时</view>
									<view>{{panHead.allEmpty.hEmpty}}空</view>
							</view>
							<view class="more-section">
									<view @click="moreOrLess" class="more-item">
											<view v-if="!moreInfo">更多</view>
											<view v-else>收起</view>
											<image class="more-item-image" :src="'../../../static/images/qimen/'+(moreInfo?'up':'down')+'.png'"></image>
									</view>
							</view>
					</view>
					<!-- 节气 -->
					<view class="jieqi-box" v-if="moreInfo">
							<view class="jieqi-content">上一个节气：{{calendar.prevTerm}}{{calendar.prevTermTimeStr}}</view>
							<view class="jieqi-content">下一个节气：{{calendar.afterTerm}}{{calendar.afterTermTimeStr}}</view>
					</view>
				</view>
        <!-- 卦象 -->
        <view class="table">
            <view class="tr" v-for="(rows, rIndex) in panBody" :key="rIndex">
                <view :class="['td', cell.gongStyle]" v-for="(cell, cIndex) in rows" :key="cIndex">
                    <view @click="onCellTap" class="flex-wrp-cell" :data-cell="cell.luoshu+','+cell.attachRoofGan+cell.roofGan+'|'+cell.attachEarthGan+cell.earthGan+','+cell.roofDoor+','+cell.attachRoofStar+cell.roofStar+','+cell.deity" hoverClass="other-navigator-hover" style="flex-direction:row;-webkit-flex-direction:row;">
                        <view class="flex-column">
                            <view class="flex-item-cell">
                                <text>{{cell.luoshu}}</text>
                            </view>
                            <view class="flex-item-cell">
                                <text></text>
                            </view>
                            <view class="flex-item-cell">
                                <text></text>
                            </view>
                        </view>
                        <view class="flex-column">
                            <view class="flex-item-cell">
                                <text>{{cell.deity}}</text>
                            </view>
                            <view class="flex-item-cell">
                                <text style="color:red;" v-if="panHead.zhiFu==cell.roofStar">{{subStar(cell.roofStar,cell.attachRoofStar)}}</text>
                                <text v-else>{{subStar(cell.roofStar,cell.attachRoofStar)}}</text>
                                <text style="color:red;" v-if="panHead.zhiFu=='天禽'">{{subStar(cell.attachRoofStar,cell.attachRoofStar)}}</text>
                                <text v-else>{{subStar(cell.attachRoofStar,cell.attachRoofStar)}}</text>
                            </view>
                            <view class="flex-item-cell">
                                <text style="color:red;" v-if="panHead.zhiShi==cell.roofDoor">{{cell.roofDoor}}</text>
                                <text v-else>{{cell.roofDoor}}</text>
                            </view>
                        </view>
                        <view class="flex-column">
                            <view class="flex-item-cell">
                                <text v-if="cell.isEmpty">〇</text>
                                <text class="horse" v-if="cell.isHorse">♞ </text>
                            </view>
                            <view class="flex-item-cell">
                                <view class="important-flag" v-if="panHead.dayGan==cell.roofGan||panHead.hourGan==cell.roofGan">{{cell.roofGan}}</view>
                                <view v-else>{{cell.roofGan}}</view>
                                <view class="important-flag" v-if="panHead.dayGan==cell.attachRoofGan||panHead.hourGan==cell.attachRoofGan">{{cell.attachRoofGan}}</view>
                                <view v-else>{{cell.attachRoofGan}}</view>
                            </view>
                            <view class="flex-item-cell">
                                <text>{{cell.earthGan}}{{cell.attachEarthGan}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 翻页 -->
        <view class="page-box">
            <image @click="beforeJu" class="page-item" src="../../../static/images/qimen/left.png"></image>
            <image @click="nextJu" class="page-item" src="../../../static/images/qimen/right.png"></image>
        </view>
    </view>
    <activity-box :positionId="403"></activity-box>
    <yipu-logo></yipu-logo>
</view>
</template>

<script>
var a = require("../js/qimen.js");
import { getQimengetSolarTimeApi } from '@/http/api/qimen/qimen.js'

export default {
  data () {
    return {
        query: {},
        loading: true,
        toView: "",
        moreInfo: !1,
        showModal: !1,
        sysInfo: {},
        params: {},
        prop: {},
        calendar: {},
        panHead: {},
        panBody: {}
    }
  },
  methods: {
    subStar: function(str1, str2) {
      if (str1 && str2) {
          return (str1.length > 1 ? str1.charAt(1) : str1)
      };
      return (str1)
    },
    panTap: function(a) {
        this.pan = !0
        this.saveDoc = !1
    },
    onCellTap: function(a) {
        var t = a.currentTarget.dataset.cell;
        if ("5" == t.split(",")[0]) return !1;
        uni.navigateTo({
            url: "/pages/qimen/zhuanpanComb/zhuanpanComb?cell=" + t
        });
    },
    switchRemarkModel: function() {
        this.showModal = !this.showModal
    },
    moreOrLess: function() {
        this.moreInfo = !this.moreInfo
    },
    onEmptyZhiTap: function(a) {
        var t = a.currentTarget.dataset.etype;
        this.params.ext.emptyType = t
        var e = this.params;
        this.loadDataFn(e);
    },
    nextJu: function() {
        var a = this.params.dateStr.toDate().dateAdd("h", 2).format("yyyy-MM-ddThh:mm"), t = this.params;
        t.dateStr = a, this.loadDataFn(t);
    },
    beforeJu: function() {
        var a = this.params.dateStr.toDate().dateAdd("h", -2).format("yyyy-MM-ddThh:mm"), t = this.params;
        t.dateStr = a, this.loadDataFn(t);
    },
    // 刷新方法
    loadDataFn: function(t) {
        var e = t.ext;
        t.ext && "string" == typeof t.ext && (e = JSON.parse(t.ext));
        // var params = JSON.parse(unescape(decodeURI(t.info)));
        // var s = this;
        // var r = t.ext;
        // t.ext && "string" == typeof t.ext && (r = JSON.parse(t.ext));
        var s = {
            id: t.id,
            question: t.question,
            remark: t.remark,
            dateStr: t.dateStr,
            panType: Number(t.panType),
            juType: Number(t.juType),
            selectJu: Number(t.selectJu),
            ext: e
        };
        var r = a.ZhuanPan(s);

        this.params = s
        this.prop = r.prop
        this.calendar = r.calendar
        this.panHead = r.panHead
        this.panBody = r.panBody
    },
    // 刷新方法
    initDataFn: function(t) {
        let dateArr = t.dateStr.split("T");
        // 获取经纬度
        getQimengetSolarTimeApi({
          birthDay: dateArr[0] + ' '+dateArr[1],
          districtGeocode: this.query.area ? this.query.area : ''
        }).then(res => {
          if (res.code == 200) {
            // 获取经纬度
            let longitudeTem = res.data.area.lon;
            var e = t.ext;
            t.ext && "string" == typeof t.ext && (e = JSON.parse(t.ext));
            // var params = JSON.parse(unescape(decodeURI(t.info)));
            // var s = this;
            // var r = t.ext;
            // t.ext && "string" == typeof t.ext && (r = JSON.parse(t.ext));
            var s = {
                id: t.id,
                question: t.question,
                remark: t.remark,
                dateStr: t.dateStr,
                panType: Number(t.panType),
                juType: Number(t.juType),
                selectJu: Number(t.selectJu),
                ext: e
            };
            if (t.isRealTime == 'true') {
              s.ext.geo = {
                longitude: longitudeTem
              }
            }
            // s.ext.geo.longitude = longitudeTem;
            var r = a.ZhuanPan(s);

            this.params = s
            this.prop = r.prop
            this.calendar = r.calendar
            this.panHead = r.panHead
            this.panBody = r.panBody
            this.loading = false
            uni.hideLoading()
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        })
    }
  },
  mounted() {
    this.query = this.$route.query;
    uni.showLoading({
      mask: true,
      title: "加载中",
    });
    this.initDataFn(this.query)
  }
}
</script>

<style>
.content {
	box-sizing: border-box;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  color: #32312e;
  font-size: 28rpx;
}
.content-box {
	padding: 0 55rpx;
}
.center-box {
	width: 641rpx;
	border-radius: 30rpx;
	box-shadow: 0 0 8rpx #666;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	margin: -56rpx auto 50rpx;
	padding: 36rpx;
	box-sizing: border-box;
}
.time-info {
  display: flex;
  flex-direction: row;
	justify-content: space-between;
  box-sizing: border-box;
  background-color: #c5a680;
  padding: 55rpx;
  color: #ffffff;
	font-size: 24rpx;
	font-weight: bolder;
	height: 350rpx;
}
.info-right {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.info-left {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.sizhi-title {
  display: flex;
  align-items: flex-end;
  white-space: nowrap;
	height: fit-content;
}
.mod-text {
  writing-mode: vertical-lr;
  padding: 8rpx;
}
.sizhi-text {
  text-align: end;
  line-height: 56rpx;
}

.more-time {
  font-size: 20rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.more-time-item {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.section {
  display: flex;
  flex-direction: row;
}
.info-title {
	white-space: nowrap;
	background-color: #4b240d;
	padding: 0 12rpx;
	
	letter-spacing: 4rpx;
}
.info-content {
	white-space: nowrap;
	padding: 0 12rpx;
}
.more-time-info-box {
  justify-content: space-between;
}
.more-sizhi {
  display: flex;
  flex-direction: row;
}

/* 年月日选择 */
.zhi-box {
	width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.zhi, .select-zhi {
  width: 20%;
  border-radius: 6rpx;
  text-align: center;
	margin: 0 2rpx;
}
.zhi {
  color: #808080;
  border: 3rpx solid #c5a680;
}
.select-zhi {
	color: #fff;
	background-color: #c5a680;
	box-shadow: 0 0 4rpx #c5a680;
}

.more-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 15%;
}
.more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.more-item-image {
  height: 26rpx;
  width: 26rpx;
}
/* 节气 */
.jieqi-box {
  display: flex;
  flex-direction: column;
  margin-top: 30rpx;
}
.jieqi-content {
  text-align: center;
}
/* 宫格 */
.table {
  display: flex;
  flex-direction: column;
}
.tr {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 12rpx;
}
.td {
  width: 32%;
  border-radius: 30rpx;
	border: solid 2rpx #4b240d;
	box-shadow: 0 0 4px #666;
  background: #fff;
}
.lightGrey {
	border: none;
}

.flex-wrp-cell {
  display: flex;
  justify-content: space-around;
  height: 100%;
  width: 100%;
}
.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 33%;
}
.flex-item-cell {
  height: 33%;
  text-align: center;
  line-height: 68rpx;
	white-space: nowrap;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
}
.important-flag {
	color: #fff;
	background-color: #4b240d;
	border-radius: 48rpx;
	height: 48rpx;
	width: 48rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* 翻页 */
.page-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
	width: 75%;
  margin:30rpx auto 0;
}
.page-item {
  height: 52rpx;
  width: 54rpx;
}
.grey-item {
	color: #808080;
}
</style>